import React from "react";
import "./progress.scss"

/**
 * @param percentage 百分比
 * @param type 进度条类型
 * @param strokeWidth 进度条的宽度
 * @param textInside 进度条显示文字内置在进度条内（仅 type 为 'line' 时可用）
 * @param status 进度条当前状态
 * @param indeterminate 是否为动画进度条
 * @param duration 控制动画进度条速度和条纹进度条流动速度
 * @param color 进度条背景色 （会覆盖 status 状态颜色）
 * @param showText 是否显示进度条文字内容
 * @param width 环形进度条画布宽度（只在 type 为 circle 或 dashboard 时可用）
 * @param striped 在进度条上增加条纹
 * @param stripedFlow 让进度条上的条纹流动起来
 */
interface Props {
    percentage: number,
    type?: 'line' | 'circle' | 'dashboard',
    strokeWidth?: number,
    textInside?: boolean,
    status?: 'primary' | 'success' | 'exception' | 'warning',
    indeterminate?: boolean,
    duration?: number,
    color?: string
    showText?: boolean,
    width?: number,
    striped?: boolean,
    stripedFlow?: boolean,
    children?: React.ReactNode
}

const Progress = ({
    percentage = 0,
    type = "line",
    strokeWidth = 6,
    textInside = false,
    status = "primary",
    indeterminate = false,
    duration = 3,
    color,
    showText = true,
    width = 126,
    striped = false,
    stripedFlow = false,
    children
}: Props) => {
    const getBgColor = () => {
        let color1 = "var(--pe-color-primary)"
        if (status === 'success') {
            color1 = "var(--pe-color-success)"
        } else if (status === "exception") {
            color1 = "var(--pe-color-error)"
        } else if (status === 'warning') {
            color1 = "var(--pe-color-warning)"
        }
        if (color) {
            color1 = color
        }
        return color1
    }

    return (
        <>
            {
                type === 'line' ? (
                    <div className="pe-progress">
                        <div className="pe-progress-bar" style={{ height: `${strokeWidth}px`, borderRadius: `${strokeWidth / 2}px` }}>
                            {
                                !indeterminate ? (
                                    <div className={["pe-progress-bar-inner", striped ? 'pe-progress-bar-striped' : '', stripedFlow ? 'pe-progress-bar-striped-flow' : ''].join(" ").trim()}
                                        style={{ width: `${percentage}%`, borderRadius: `${strokeWidth / 2}px`, backgroundColor: getBgColor(), animationDuration: `${duration}s` }}>
                                        {
                                            textInside && showText ? (
                                                children || children === 0 ? children : `${percentage}%`
                                            ) : null
                                        }
                                    </div>
                                ) : (
                                    <div className="pe-progress-bar-indeterminate"
                                        style={{ borderRadius: `${strokeWidth / 2}px`, backgroundColor: getBgColor(), animationDuration: `${duration}s` }}>
                                    </div>
                                )
                            }
                        </div>
                        {
                            !textInside && showText ? (
                                <div>
                                    {
                                        children || children === 0 ? children : `${percentage}%`
                                    }
                                </div>
                            ) : null
                        }
                    </div>
                ) : (
                    <div className="pe-progress-circle" style={{ width: `${width}px`, height: `${width}px` }}>
                        {
                            type === 'circle' ? (
                                <svg viewBox="0 0 100 100">
                                    <path d="
          M 50 50
          m 0 -47
          a 47 47 0 1 1 0 94
          a 47 47 0 1 1 0 -94
          " stroke="#e5e9f2" strokeLinecap="round" strokeWidth="4.8" fill="none"
                                        style={{ strokeDasharray: "295.31px, 295.31px", strokeDashoffset: 0 }}></path>
                                    <path d="
          M 50 50
          m 0 -47
          a 47 47 0 1 1 0 94
          a 47 47 0 1 1 0 -94
          " stroke={getBgColor()} fill="none" opacity={percentage === 0 ? 0 : 1} strokeLinecap="round"
                                        strokeWidth="4.8"
                                        style={{ strokeDasharray: `${percentage * 295.31 / 100}px, 295.31px`, strokeDashoffset: '0px', transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s, opacity 0.6s ease 0s' }}>
                                    </path>
                                </svg>
                            ) : (
                                <svg viewBox="0 0 100 100">
                                    <path d="
          M 50 50
          m 0 47
          a 47 47 0 1 1 0 -94
          a 47 47 0 1 1 0 94
          " stroke="#e5e9f2" strokeLinecap="round" strokeWidth="4.8" fill="none"
                                        style={{ strokeDasharray: "221.482px, 295.31px", strokeDashoffset: -36.9137 }}></path>
                                    <path d="
          M 50 50
          m 0 47
          a 47 47 0 1 1 0 -94
          a 47 47 0 1 1 0 94
          " stroke={getBgColor()} fill="none" opacity={percentage === 0 ? 0 : 1} strokeLinecap="round"
                                        strokeWidth="4.8"
                                        style={{ strokeDasharray: `${percentage * 221.482 / 100}px, 295.31px`, strokeDashoffset: '-36.9137px', transition: 'stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s, opacity 0.6s ease 0s' }}>
                                    </path>
                                </svg>
                            )
                        }
                        <div className="pe-progress-circle-content">
                            {
                                children || children === 0 ? children : `${percentage}%`
                            }
                        </div>
                    </div>
                )
            }
        </>
    )
}

export default Progress